<template>
  <view class="container pa-16 mb-12">
    <view class="label-color fz-18 mb-12">
      <text>报名信息</text>
    </view>
    <Tabs v-model="currentTab" :data="registerInfoList">
      <TabNav
        height="64rpx"
        tabNameActiveColor="#fff"
        activeBackgroundColor="#2878ff"
        backgroundColor="#f2f3f5"
        navType="capsule"
      />
      <template v-for="(v, i) in registerInfoList" :key="v.id">
        <TabsItem :name="getTabsItemName(v)" :value="i">
          <RegistrationPersonItem
            :id="v.id"
            :personName="v.personName"
            :personTel="v.personTel"
            :ticketName="ticketName"
            :activityStatus="activityStatus"
            :register-item="v.activityRegisterTicketUnion"
            :remarks="v.remarks"
            @refresh="emits('refresh')"
            @show-voucher="handleShareVoucher(v)"
          />
        </TabsItem>
      </template>
    </Tabs>
  </view>

  <RegisterVoucher
    v-if="currentRegisterInfo"
    ref="registerVoucher"
    :avatar="currentRegisterInfo?.avatar"
    :person-name="currentRegisterInfo?.personName"
    :person-tel="currentRegisterInfo?.personTel"
    :activity-title="activityTitle"
    :ticket-name="currentRegisterInfo?.ticketName"
    :consume-no="currentRegisterInfo?.consumeNo"
    :consume-no-url="currentRegisterInfo?.consumeNoUrl"
    @success="handlePosterSuccess"
  />
</template>

<script setup lang="ts">
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import type { ActivityRegisterInfoItem } from '@/api/order/types';
  import { propTypes } from '@/utils/propTypes';
  import { ref, type PropType } from 'vue';
  import { ActivityStatusEnum, ApprovalStatusEnum } from '@/enums/activityStatusEnum';
  import RegistrationPersonItem from './RegistrationPersonItem.vue';
  import RegisterVoucher from '../../components/RegisterVoucher.vue';
  import { Toast } from '@/utils';

  defineProps({
    registerInfoList: {
      type: Array as PropType<ActivityRegisterInfoItem[]>,
      default: () => [],
    },
    activityTitle: propTypes.string,
    ticketName: propTypes.string,
    activityStatus: Number as PropType<ActivityStatusEnum>,
  });

  const emits = defineEmits(['refresh']);

  const registerVoucher = ref<{ canvasToTempFilePath: () => Promise<string> } | null>(null);
  const currentRegisterInfo = ref<ActivityRegisterInfoItem['activityRegisterTicketUnion']>();
  const lastPosterId = ref<number>();
  const posterMap = ref<{ [x: number]: string }>({});

  let posterTimer: NodeJS.Timeout;

  function handleShareVoucher(item: ActivityRegisterInfoItem) {
    const id = item.activityRegisterTicketUnion?.id as number;
    const url = posterMap.value[id];
    if (posterMap.value[id]) {
      uni.showShareImageMenu({
        path: url,
      });
      return;
    }
    lastPosterId.value = id;
    currentRegisterInfo.value = item.activityRegisterTicketUnion;
    uni.showLoading({
      title: '凭证生成中...',
      mask: true,
    });

    posterTimer = setTimeout(() => {
      Toast('凭证生成失败，请稍后重试');
      uni.hideLoading();
    }, 3000);
  }

  function handlePosterSuccess(url: string) {
    console.log(url);

    clearTimeout(posterTimer);
    posterMap.value[lastPosterId.value!] = url;
    currentRegisterInfo.value = void 0;
    uni.hideLoading();
    uni.showShareImageMenu({
      path: url,
    });
  }

  const getApprovalStatusText = new Map([
    [ApprovalStatusEnum.UNDERREVIEW, '待审核'],
    [ApprovalStatusEnum.REJECT, '驳回'],
    [ApprovalStatusEnum.NOTPASS, '拒绝'],
    [ApprovalStatusEnum.CANCEL, '取消'],
    [ApprovalStatusEnum.CANCELING, '退款中'],
  ]);

  function getTabsItemName(item: ActivityRegisterInfoItem) {
    let text;
    if (item.activityRegisterTicketUnion) {
      text = getApprovalStatusText.get(item.activityRegisterTicketUnion.approvalStatus);
    }

    return text ? `${item.personName}（${text}）` : item.personName;
  }

  const currentTab = ref(0);
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
  }

  .label-color {
    color: #333;
  }
</style>
